

<template>
    <div class="main">
      <a-layout>
      <a-layout-header><Header/></a-layout-header>
      <a-layout-content><ColumnList :list="list"></ColumnList></a-layout-content>
    </a-layout>
  
    </div>
  </template>
  <script setup lang="ts">
  import { defineComponent, DefineComponent, reactive } from "vue";
  import ColumnList, { ColumnProps } from "../components/ColumnList.vue";
  import Header from "@/components/Header.vue"
  defineComponent(() => {
    ColumnList;
    Header
  });
  let list: ColumnProps[] = [
    {
      id: 1,
      title: "test1的专栏",
      description: "这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧这是的test1专栏，有一段非常有意思的简介，可以更新一下欧",
      avatar:"http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100",
    },
    {
      id: 2,
      title: "test2的专栏",
      description: "这是的test2专栏，有一段非常有意思的简介，可以更新一下欧",
      avatar:
        "http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100",
    },
    {
      id: 3,
      title: "test2的专栏",
      description: "这是的test2专栏，有一段非常有意思的简介，可以更新一下欧",
      avatar:
        "http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100",
    },
  ];
  </script>
  <style scoped>
  .main{
    height: 100%;
    width: 100%;
  }
  </style>
  